const selectDom = new buildPage({
    template: `
        <div class="layui-unselect layui-form-select" :type="{{ type }}">
            <div class="layui-select-title">
                <input
                    type="text"
                    placeholder="输入关键词以检索数据"
                    class="layui-input layui-unselect"
                    :value="{{ selectValue }}"
                    @click="changeSelect"
                    @input="changeInput"
                    @blur="onBlur"
                >
                <i class="layui-edge"></i>
            </div>
            <dl class="layui-anim layui-anim-upbit select-btn">
                <div i-for="item in list">
                    <dd :value="{{ item.id }}" @click="selectSuccess">{{ item.name }}</dd>
                </div>
            </dl>
        </div>
    `,
    data: {
        type: '',
        selectValue: ''
    },
    methods: {
        changeSelect(e) {
            let root = e.parentElement.parentElement
            root.className = root.className.trim() === 'layui-unselect layui-form-select'
                ? 'layui-unselect layui-form-select layui-form-selected'
                : 'layui-unselect layui-form-select'
        },
        changeInput(e) {
            this.emit('getSaasServerList', {
                type: this.options.methods.getType.apply(this, [e]),
                value: e.value
            })
        },
        getType(e) {
            if (this.data.type === '') {
                Reflect.set(this.data, 'type', e.parentElement.parentElement.getAttribute('type'))
            }
            return this.data.type
        },
        selectSuccess(e) {
            e.parentElement.parentElement.parentElement.querySelector('input').value = e.innerText
            e.parentElement.parentElement.parentElement.className = 'layui-unselect layui-form-select'
            this.emit('selectChange', [{
                type: e.parentElement.parentElement.parentElement.getAttribute('type'),
                value: e.getAttribute('value')
            }])
        },
        onBlur(e) {
            setTimeout(() => {
                e.parentElement.parentElement.className = 'layui-unselect layui-form-select'
            }, 200)
        }
    }
})


const saas = new buildPage({
    dom: '#saas',
    data: {
        addForm: {
            saas_domain: '',
            saas_as_domain: '',
            lease_renewal_time: Date.parse(getNowFormatDate()) / 1000,
            // 过期时间设定为十年后
            lease_renewal_end_time: Date.parse(getNowFormatDate(10)),
            server_id: '',
            server_db_id: '',
            db_name: '',
            db_password: '',
            db_user: '',
        },
        serverList: [],
        dbServerList: [],
        created: false
    },
    components: {
        selectDom
    },
    created() {
        this.StateX.getAction('getUserInfo', 'userInfo').then(info => {
            if (info.uid === undefined) {
                layer.msg('暂未登录')
                window.location.href = `${window.location.origin}/cms/home/cms-pages-sigin`
                return
            }
            Reflect.set(this.data, 'userInfo', info)
            this.options.methods.getSaasServerList.apply(this, [{
                type: 'server_id'
            }])
            this.options.methods.getSaasServerList.apply(this, [{
                type: 'server_db_id'
            }])
        })
    },
    methods: {
        selectChange(e) {
            Reflect.set(this.data.addForm, `${e.type}:noUpdate`, e.value)
        },
        inputChange(e) {
            let key = e.getAttribute('name')
            Reflect.set(this.data.addForm, `${key}:noUpdate`, e.value)
        },
        addSaasAccount(e) {
            if (this.data.created) {
                layer.msg('正在创建服务')
                return
            }

            Reflect.set(this.data, 'created:noUpdate', true)
            createSaasAccount({
                saasClientInfo: this.data.addForm
            }).then(res => {
                layer.msg(res.msg)
                Reflect.set(this.data, 'created:noUpdate', false)
                if (res.code === 200) {
                    setTimeout(() => {
                        window.location.reload()
                    }, 300)
                }
            })
        },
        getSaasServerList(e = {}) {
            if (e.type === 'server_id') {
                getSaasServer({
                    server_name: e.value || ''
                }).then(res => {
                    Reflect.set(this.data, 'serverList', res.items.map(e => {
                        e.id = e.server_id
                        e.name = e.server_name
                        return e
                    }))
                })
            } else {
                getSaasDbServer({
                    server_db_name: e.value || ''
                }).then(res => {
                    Reflect.set(this.data, 'dbServerList', res.items.map(e => {
                        e.id = e.server_db_id
                        e.name = e.server_db_name
                        return e
                    }))
                })
            }
        }
    }
}).use({
    stateX
}).mount()